<template>
  <div>
    <el-row style="background-color: #f7f8fB;line-height: 40px;color: #999999;font-size: 16px">
      <el-col :span="2" :offset="3"><i class="el-icon-s-home" style="font-size: 18px"></i>&nbsp;<span @click="shou">商城首页</span></el-col>
      <el-col :span="1" :offset="11">异议反馈</el-col>
      <el-col :span="1"><i class="el-icon-phone-outline">客户服务</i></el-col>
      <el-col :span="1">我的商城</el-col>
      <el-col :span="1">消息推送</el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="3">
        <img src="../img/goodsLogo.png" style="width: 350px;margin-left: 10px;margin-top: 10px">
      </el-col>
      <el-col :span="4" :offset="2" style="margin-top: 30px">
        <el-input placeholder="请输入内容" style="width: 500px;" v-model="sou">
          <template slot="append">
            <el-button style="background-color: #3b99fc;color: white;border-radius: 0;width: 90px;font-size: 16px" @click="chazhao">搜索</el-button>
          </template>
        </el-input>
        <br><br>
        <a style="color: #666666">德玛仕厨房设备</a>
        <a style="color: #666666;margin-left: 20px">全棉时代女工卫生用品</a>
      </el-col>
      <el-col :span="4" :offset="3">
        <el-button style="background-color: #f7f8fb;border-radius: 20px;margin-top: 35px;width: 150px;height: 45px" @click="gouwu">我的购物车
          <el-badge :value="numberAll" class="item"></el-badge></el-button>
        <el-button style="background-color: #f7f8fb;border-radius: 20px;margin-top: 35px;width: 150px;height: 45px" @click="TiaoOrder">我的订单</el-button>
      </el-col>
    </el-row>


    <div style="background-color: seashell;border:2px solid orangered;width: 1100px;height: 720px;margin-left: 300px;margin-top: 50px">
        <div style="width: 500px;height: 800px;display: block;position: relative;margin-top: 30px;margin-left: 30px" >
          <div class="container" @mousemove="moveLens" @mouseover="showLens" @mouseleave="hideLens">
            <img :src="imageUrl" alt="Product" class="product-image" ref="productImage" width="500px" height="500px">
          </div>
          <div style="width: 500px;height: 100px">
            <img :src="pic1" width="100px" height="100px" style="margin-left: -180px" @mouseover="overPic1" @mouseleave="leavePic1" id="pic1">
            <img :src="pic2" width="100px" height="100px" @mouseover="overPic2" @mouseleave="leavePic2" id="pic2">
            <img :src="pic3" width="100px" height="100px" @mouseover="overPic3" @mouseleave="leavePic3" id="pic3">
          </div>
          <div v-show="showMagnifier" class="magnifier" ref="magnifier" id="move"></div>
          <div style="width: 500px;height: 700px;margin-top: -600px;margin-left: 550px">
            <el-row>
              <el-col :span="5" style="margin-top: 10px;font-size: 20px;font-weight: 600">商品名称:</el-col>
            </el-row>
            <el-row>
              <el-col :span="20" style="margin-left: 10px;font-size: 20px">{{goodsOne.goodsName}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="5" style="margin-top: 10px;font-size: 20px;font-weight: 600">商品描述:</el-col>
            </el-row>
            <el-row>
              <el-col :span="20" style="margin-left: 40px;text-indent: 40px;text-align: left;margin-top: 10px;font-size: 20px">{{goodsOne.goodsInfo}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="5" style="margin-top: 10px;font-size: 20px;font-weight: 600">商品价格:</el-col>
            </el-row>
            <el-row>
              <el-col :span="8" :offset="6" style="font-size: 26px;color: red">￥{{goodsOne.goodsPrice}}.00/件</el-col>
              <el-col :span="4" :offset="5" style="margin-top: 10px;font-size: 16px">销量：{{20-goodsOne.goodsStock}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="5" style="margin-left: -20px;margin-top: 10px;font-size: 20px;font-weight: 600">承诺:</el-col>
            </el-row>
            <el-row>
              <el-col :span="12" :offset="5" style="font-size: 18px;"><i class="el-icon-finished" style="font-size: 22px">&nbsp;&nbsp;</i>支持七天无理由退货&nbsp;！</el-col>
            </el-row>
            <el-row>
              <el-col :span="5" style="margin-left: -20px;margin-top: 10px;font-size: 20px;font-weight: 600">数量:</el-col>
            </el-row>
            <el-row>
              <el-col :span="16" :offset="3" style="margin-top: 10px">
                <div>
                  <el-button @click="decrement" style="width: 50px;font-size: 20px">-</el-button>
                  <div style="display: inline-block;width: 40px"><span>{{ number }}</span></div>
                  <el-button @click="increment" style="width: 50px;font-size: 20px">+</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" style="margin-left: -10px;margin-top: 10px;font-size: 20px;font-weight: 600">总价格:</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" :offset="8" style="font-size: 26px;color: red">￥{{ AllPrice }}.00</el-col>
            </el-row>
            <el-row>
              <el-col :span="5" style="margin-left: -10px;margin-top: 10px;font-size: 20px;font-weight: 600">收货地址:</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" :offset="6" style="font-size: 26px;color: red">
                <el-input :style="{'width': '250px', 'border': error ? '2px solid red' : ''}" placeholder="请输入收货地址" v-model="addr"></el-input>
              </el-col>
            </el-row>
            <el-row style="margin-top: 40px">
              <el-col :span="6" :offset="2">
                <el-button style="width: 150px;height: 50px;font-size: 18px;background-color: #FFE4D0;color:#E5511D" @click="goumai">立即购买</el-button>
              </el-col>
              <el-col :span="9" :offset="2">
                <el-button  @click="jiaru()" style="width: 180px;height: 50px;font-size: 18px;background-color: #ff4400;color:white"><i class="el-icon-shopping-cart-full">&nbsp;&nbsp;</i>加入购物车</el-button>
              </el-col>
            </el-row>
          </div>
          <div style="width: 250px;height: 360px;border: 1px solid orangered ;border-left-style: none;margin-top: -731px;margin-left: 1071px" >
            <img src="../img/goods/left1.png" width="250px" height="360px">
          </div>
      </div>
      <div style="width: 250px;height: 361px;border: 1px solid orangered ;border-left-style: none;border-top-style:none;margin-top: -471px;margin-left: 1101px;background-color: #e9fff1" >
            <el-row style="height: 20px">
              <el-col style="margin-top: -240px;font-size: 18px;font-weight: 600" :span="12">类似商品</el-col>
            </el-row>
            <div style="width: 210px;height: 250px;margin-top: 20px;margin-left: 20px;">
                <div style="width: 100px;height: 119px;color: red">
                    <img :src="goodsAll1.goodsPic1" width="100px" height="100px">
                    ￥{{goodsAll1.goodsPrice}}元 <el-button style="border-radius:10px;height: 10px;line-height: 5px;z-index: 10" @click="lei(goodsAll1.goodsId)">去查看</el-button>
                </div>
              <div style="width: 100px;height: 130px;margin-left: 110px;margin-top: -120px;color: red;z-index: 5">
                <img :src="goodsAll2.goodsPic1" width="100px" height="100px">
                ￥{{goodsAll2.goodsPrice}}元 <el-button style="border-radius:10px;height: 10px;line-height: 5px"  @click="lei(goodsAll2.goodsId)">去查看</el-button>
              </div>
              <div style="width: 100px;height: 130px;margin-top: 30px;margin-left:-105px;color: red;display: inline-block">
                <img :src="goodsAll3.goodsPic1" width="100px" height="100px">
                ￥{{goodsAll3.goodsPrice}}元 <el-button style="border-radius:10px;height: 10px;line-height: 5px"  @click="lei(goodsAll3.goodsId)">去查看</el-button>
              </div>
              <div style="width: 100px;height: 130px;margin-top: 30px;margin-left:-212px;color: red;display: inline-block">
                <img :src="goodsAll4.goodsPic1" width="100px" height="100px">
                ￥{{goodsAll4.goodsPrice}}元 <el-button style="border-radius:10px;height: 10px;line-height: 5px"  @click="lei(goodsAll4.goodsId)">去查看</el-button>
              </div>
            </div>
      </div>
    </div>
    <div style="width: 100%;margin-top: 60px">
      <img src="../img/goods/di1.png" width="2010">
    </div>
  </div>
</template>

<script>
export default {
  name: "goodsItem",
  data(){
    return{
      sid:'',
      sou:'',
      pic1:'',
      pic2:'',
      pic3:'',
      addr:'',
      error: false,
      goodsOne:{},
      goodsAll1:{},
      goodsAll2:{},
      goodsAll3:{},
      goodsAll4:{},
      showMagnifier: false,
      zoomLevel: 2,
      magnifier: null,
      magWidth: 500, // 放大镜宽度
      magHeight: 500, // 放大镜高度
      imageUrl:'',
      number:1,
      AllPrice:1,
      numberAll:0
    }
  },
  methods:{
    findOne(){
      this.$axios.get('/goods/selectOne',{params:{gid:this.sid}}).then(res=>{
        this.goodsOne = res.data.data
        this.AllPrice = this.goodsOne.goodsPrice
        this.imageUrl = res.data.data.goodsPic1
        this.pic1 = res.data.data.goodsPic1
        this.pic2 = res.data.data.goodsPic2
        this.pic3 = res.data.data.goodsPic3
      })
    },
    goumai(){
      if (this.addr==''){
        this.error = true;
        return
      }else {
        this.error = false;
      }
      this.$axios.get('/gorder/insert', {params:
          {gid:this.sid,num:this.number,addr:this.addr}
      }).then(res=>{
          localStorage.setItem("addr",this.addr)
          this.$router.push('/goodsOrder')
      })
    },
    chazhao(){
      if (this.sou==''){
        return
      }
      this.$axios.get('/goods/selectLike',{params:{src:this.sou}}).then(res=>{
        this.$router.push({path:'/goodsList',query: {data:res.data.data}})
      })
    },
    TiaoOrder(){
        this.$router.push('/goodsOrder')
    },
    lei(id){
      this.number=1
      this.sid = id;
      this.findOne()
    },
    jiaru() {
      if (this.addr==''){
        this.error = true;
        return
      }else {
        this.error = false;
      }
      this.$axios.get('/cart/addCart', {params: {gid: this.goodsOne.goodsId,num:this.number}}).then(res => {
          localStorage.setItem("adds",this.addr)
          this.$router.push('/goodsCart')
      })
    },
    gouwu(){
      this.$router.push('/goodsCart')
    },
    findAll(){
      this.$axios.get('/goods/selectByGoodsIdAndOne',{params:{gid:this.sid}}).then(res=>{
        console.log(res.data.data)
        this.goodsAll1 = res.data.data[0]
        this.goodsAll2 = res.data.data[1]
        this.goodsAll3 = res.data.data[2]
        this.goodsAll4 = res.data.data[3]
      })
    },
    showLens(event) {
      this.showMagnifier = true;
      this.magnifier = this.$refs.magnifier;
      this.moveLens(event);
    },
    moveLens(event) {
      var elementById = document.getElementById('move');
      elementById.style.display = 'block';
      if (this.showMagnifier) {
        const image = this.$refs.productImage;

        const offset = image.getBoundingClientRect();
        const x = event.pageX - window.pageXOffset - offset.left;
        const y = event.pageY - window.pageYOffset - offset.top;

        const magPosX = x - (this.magWidth / 2);
        const magPosY = y - (this.magHeight / 2);

        const bgPosX = -magPosX * this.zoomLevel;
        const bgPosY = -magPosY * this.zoomLevel;

        this.magnifier.style.backgroundImage = `url('${this.imageUrl}')`;
        this.magnifier.style.backgroundSize = `${image.width * this.zoomLevel}px ${image.height * this.zoomLevel}px`;
        this.magnifier.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;

      }
    },
    hideLens() {
      var elementById = document.getElementById('move');
      elementById.style.display = 'none';
      this.showMagnifier = false;
    },
    overPic1(){
        this.imageUrl = this.pic1
        var pic1 = document.getElementById('pic1');
        pic1.style.border='4px solid red'
    },
    overPic2(){
        this.imageUrl = this.pic2
        var pic2 = document.getElementById('pic2');
        pic2.style.border='4px solid red'
    },
    overPic3(){
        this.imageUrl = this.pic3
        var pic3 = document.getElementById('pic3');
        pic3.style.border='4px solid red'
    },
    leavePic1(){
        var pic1 = document.getElementById('pic1');
        pic1.style.border='none'
    },
      leavePic2(){
        var pic2 = document.getElementById('pic2');
        pic2.style.border='none'
    },
    leavePic3(){
        var pic3 = document.getElementById('pic3');
        pic3.style.border='none'
    },
    increment() {
      this.number++;
      this.AllPrice = this.number * this.goodsOne.goodsPrice
    },
    decrement() {
      if (this.number > 1) {
        this.number--;
        this.AllPrice = this.number * this.goodsOne.goodsPrice
      }
    },
    shou(){
      this.$router.push('/goods')
    },
    quanju(){
      this.$axios.get('/cart/findAllByUid').then(res=>{
        this.numberAll = res.data.data.length
      })
    }
  },
  mounted() {
    this.sid=this.$route.query.key
    if (this.$route.query.key==null){
      this.sid=this.$route.query.id
    }
    this.findOne()
    this.findAll()
    this.quanju()
  }
}
</script>

<style scoped>
.container {
  position: relative;
}

.product-image {
  max-width: 100%;
  display: block;
}
.magnifier {
  display: none;
  position: absolute;
  width: 500px; /* 调整放大镜大小 */
  height: 500px; /* 调整放大镜大小 */
  border: 2px solid red; /* 放大镜边框样式 */
  margin-top: -600px;
  margin-left: 520px;
  cursor: zoom-in;
  z-index: 999;
}

</style>
